import { NavLink } from "react-router-dom";

import { RenderRoutes } from "./router";

import "./App.css";

export default function App() {
  /*
    当路由路径是 /，希望加载 Home 组件显示
    当路由路径是 /pins，希望加载 Pins 组件显示
    当路由路径是 /course，希望加载 Course 组件显示
  */
  return (
    <>
      <ul className="nav-list">
        <li className="nav-item">
          {/* Link: 实现路由连接跳转（跳转路由） */}
          {/* <Link to="/">首页</Link> */}

          {/* NavLink: 和 Link 功能一致，不同的是高亮状态下多一个 class=active */}
          <NavLink to="/">首页</NavLink>
        </li>
        <li className="nav-item">
          <NavLink to="/pins">沸点</NavLink>
          {/* <a href="/pins">沸点</a> */}
        </li>
        <li className="nav-item">
          <NavLink to="/course">课程</NavLink>
        </li>
      </ul>

      {RenderRoutes()}
    </>
  );
}
